<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 500px;
				height: 500px;
				background-color: #9fff45;
				
				
			}
			#div2{
				width: 400px;
				height: 400px;
				background-color: #54fff1;
				margin-top: 25px;
				margin-left: 50px;
			}
			#div3{
				width: 300px;
				height: 300px;
				background-color: #7054ff;
				margin-top: 25px;
				margin-left: 50px;
			}
			#div4{
				width: 200px;
				height: 200px;
				background-color: #ff57db;
				margin-top: 25px;
				margin-left: 50px;
			}
			#img{
				width: 100px;
				height: 100px;
				margin-top: 50px;
				margin-left: 50px;
			}
			
			
		</style>
	</head>
	<body>
		<div id="div1">
			div1
			<div id="div2">
				<p>div2</p>
				<div id="div3">
					<a href="https://www.baidu.com/">div3</a>
					<div id="div4" >
						
						<img src="img/img1.jpg" id="img">div4
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var obj1=document.getElementById('div4');
		console.log(obj1.parentElement.parentElement.parentElement)
		console.log(obj1.parentNode.parentNode.parentNode)
		console.log('--------------------------------------------')
		console.log(obj1.parentElement.parentElement)
		console.log(obj1.parentNode.parentNode)
		console.log(obj1.children)
		console.log(obj1.childNodes)
	</script>
</html>
